import { useAppDispatch } from '@/store'
import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { fetchBannerDataAction, fetchGetNewAlbum, fetchHotRecommend } from './store/recommend'
import TopBanners from './c-cpns/top-banners'
import { Content, RecommendLeft, RecommendRight, RecommendWrapper } from './style'
import HotRecommend from './c-cpns/hot-recommend'
import NewAlbum from './c-cpns/new-album'

const Recommend: React.FC<any> = memo((props) => {
  /**发起action  */
  const dispatch = useAppDispatch()
  useEffect(() => {
    dispatch(fetchBannerDataAction())
    dispatch(fetchHotRecommend())
    dispatch(fetchGetNewAlbum())
  }, []);

  return (
    <RecommendWrapper>
      {/* 轮播图 */}
      <TopBanners />
      {/* 主体内容 */}
      {/* <div className="contnet wrap-v2">
        <div className="left">left</div>
        <div className="right">right</div>
      </div> */}
      <Content className="w980">
        {/* 主体推荐页左侧 */}
        <RecommendLeft>
          {/* 热门推荐 */}
          <HotRecommend history={props.history} />
          {/* 新碟上架 */}
          <NewAlbum />
          {/* 榜单 */}
          {/* <RecommendRanking to={props.history} /> */}
        </RecommendLeft>
        {/* 主体推荐页右侧 */}
        <div>right</div>
        {/* <RecommendRight> */}
        {/* 登录 */}
        {/* <UserLogin /> */}
        {/* 入驻歌手 */}
        {/* <SettleSinger /> */}
        {/* 热门主播 */}
        {/* <HotArtist /> */}
        {/* </RecommendRight> */}
      </Content>
    </RecommendWrapper>
  )
})
export default Recommend